<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>html标签的分类</title>
    <style>
        div{
            width:100px;
            height: 100px;
            background-color: red;
        }
        a{
            width:100px;
            height: 100px;
            background-color: red;
            margin-top: 100px;
            margin-bottom: 100px;
        }
    </style>
</head>
<body>
    <!--块标签
        div,p,ul-li,dl-dt-dd,h1-h6
        特点：1.独占一行 2.能够设置width,height
        display:block
    -->
    <div>div</div>
    <p>p</p>
    <h1>H1</h1>
    <!--
        内联标签 a,span,i,em,strong
        1.并排显示
        2.不能设置width,height
        3.不能设置margin-top,margin-bottom
        底层有一个display:inline
    -->
    <a href="#">a</a>
    <span>span</span>
    <i>i</i>
    <em>em</em>
    <strong>strong</strong>
    <p>hello world</p>
    <!--内联块 img，input,button
        1.并排显示 2.能设置width,height
        display:block;
    -->
    <input type="text" >
    <button>确定</button>
</body>
</html>